<template>
    <div class="panel">
        <p class="title">
            {{props.title}}
            <slot name='one'></slot>
            <slot name='two'></slot>
        </p>
        <div class="echart">
            
        </div>
        <div class="foot"></div>
    </div>
</template>
<script lang="ts" setup>
import {defineProps} from "vue"
const props=defineProps({
    title:String
})

</script>
<style lang="scss">
    .panel{
        width:100%;
        height:3.875rem;
        border:1px solid rgba(25, 186, 139, 0.17);
        background: url(../assets/images/line.png);
        padding: 0 0.1875rem 0;
        margin-bottom: 0.1875rem;
        position: relative;
        &::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            width:.125rem;
            height:.125rem;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
        }
        &::after{
            content:"";
            position:absolute;
            right:0;
            top:0;
            width:.125rem;
            height:.125rem;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
        }
        .foot{
            position: absolute;
            bottom: 0;
            left:0;
            width:100%;
            &::before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
                width: .125rem;
                height: .125rem;
                border-bottom: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
                }
                &::after {
                position: absolute;
                bottom: 0;
                right: 0;
                content: "";
                width: .125rem;
                height: .125rem;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
                }
        }
        .title{
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.25rem;
            font-weight: 400;
        }
         .echart {
             height: 3rem;
            background-color: pink;
            }
    }
    
</style>
